<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09Vue实例_生命周期</title>
</head>
<body>
<!--
1. vue对象的生命周期
    1). 初始化显示
        * beforeCreate()
        * created()
        * beforeMount()
        * mounted()
    2). 更新显示：this.xxx = value;
        * beforeUpdate()
        * updated()
    3). 销毁vue实例
        * beforeDestroy()
        * destroyed()
2. 常用生命周期方法
    mounted()：发送ajax请求，启动定时器等异步任务
    beforeDestroy()：做收尾工作，如：清除定时器
-->
<div id="test">
    <button @click="destroyVm">destroy vue</button>
    <p v-show="isShow">尚硅谷IT教育</p>
    <p>{{isShow}}</p>
    <p>{{isShow}}</p>
    <p>{{isShow}}</p>
    <p>{{isShow}}</p>
    <p>{{isShow}}</p>
    <p>{{isShow}}</p>
</div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      new Vue({
        el:'#test',
        data:{
          isShow: true
        },
        //1. 初始化阶段
        beforeCreate(){
          console.log('beforeCreate()');
        },

        created(){
          console.log('created()');
        },

        beforeMount(){
          console.log('beforeMount()');
        },

        mounted(){    //初始化显示之后，立即调用 (1次)
          console.log('mounted()');
          //只要是回调函数，都用箭头函数，避免出现问题
          //一但将一个函数当作参数传递，就用箭头函数，因为箭头函数就是定义一个匿名函数的
          //箭头函数的特点：函数内部没有的就用外部的(此时的this没有，就用外部的，此时就是Vue对象)
          this.intervalId = setInterval( () => {
            console.log('-----');
            this.isShow = !this.isShow;   //更新数据，调用beforeUpdate() 和 updated()
          },1000);
        },

        //2.更新阶段
        beforeUpdate(){
          console.log('beforeUpdate()');
        },

        updated(){
          console.log('updated()');
        },

        //3.死亡阶段
        beforeDestroy(){  //死亡之前调用 (1次)
          console.log('beforeDestroy() ');
          //清除定时器
          clearInterval(this.intervalId);
        },
        destroyed(){
          console.log('destroyed()');
        },
        methods:{
          destroyVm(){
            //干掉vm
            this.$destroy();
          }
        }
      });


    </script>
</body>
</html>
